<template>
	<el-container>
		<el-main>
			<el-row type="flex" justify="center">
				<el-form :model="userInfo" :rules="rules" status-icon ref="userInfo" label-width="80px" class="demo-ruleForm login-container">
					<h3 class="title">管理系统登录</h3>
					<el-form-item label="用户名" prop="username">
						<el-input v-model="userInfo.username" placeholder="用户名"></el-input>
					</el-form-item>
					<el-form-item label="密码" prop="password">
						<el-input v-model="userInfo.password" type="password" placeholder="密码" @keyup.enter.native="login"></el-input>
					</el-form-item>
					<div class="auto-login">
						<el-checkbox v-model="checked" style="color:#a0a0a0;">记住密码</el-checkbox>
						<!-- <span style="cursor: pointer;color: #f19149;font-size: 0.25rem;margin-left: 5px;">忘记密码？</span> -->
					</div>
					<el-form-item class="submit-item">
						<el-button type="primary" style="width: 100%;" icon="el-icon-upload" @click="login" :loading="logining">登录</el-button>
					</el-form-item>
				</el-form>
			</el-row>
		</el-main>
	</el-container>


</template>

<script>
	import {setCookie,getCookie} from '../../until/until'
	export default {
		name: 'goods',
		methods: {
			login() {
				let params = {
					username: this.userInfo.username,
					password: this.userInfo.password
				}
				this.$refs.userInfo.validate((valid) => {
					if (valid) {
						this.logining = true
						this.$ajax.post('/api/login/loginAccount', this.userInfo).then((res) => {
							this.logining = false
							console.log(res)
							if(this.checked){
								//记住密码。存储cookie
								setCookie('session',this.userInfo.username,7)
								setCookie('sessionp',this.userInfo.password,7)
							}
							if (res.data) {
								if (res.data.code == 1) {
									this.$store.dispatch('login',this.userInfo.username)
									localStorage.setItem('token',this.userInfo.username)
									// this.$store.dispatch('token',this.userInfo.username)
									// console.log(this.$store.state.token)
									this.$notify({
										type: 'success',
										message: '欢迎你,' + this.userInfo.username + '!',
										duration: 3000,
									})
									 this.$router.push({ path: '/home' });
									// this.$store.dispatch('login',this.userInfo.username).then(() => {
									// 	this.$notify({
									// 		type: 'success',
									// 		message: '欢迎你,' + this.userInfo.username + '!',
									// 		duration: 3000,
									// 	})
									// 	 this.$router.push({ path: '/home' });
									// })
								} else {
									this.logining = false
									this.$message({
										type: 'error',
										message: res.data.msg,
										showClose: true
									})
								}
							}
						}).catch((err) => {
							this.$message({
								type: 'error',
								message: '网络错误，请重试',
								showClose: true
							})

						})

					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		data() {
			return {
				userInfo: {
					username: '',
					password: ''
				},
				checked: false,
				logining: false,
				rules: {
					username: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]

				}
			}
		},

		mounted() {
			console.log(getCookie('session'))
			this.userInfo.username = getCookie('session')
			this.userInfo.password = getCookie('sessionp')
		},
		
	}
</script>

<style scoped>
	.login-container {
		-webkit-border-radius: 5px;
		border-radius: 5px;
		-moz-border-radius: 5px;
		background-clip: padding-box;
		margin: 180px auto;
		width: 350px;
		padding: 35px 35px 15px 35px;
		background: #fff;
		border: 1px solid #eaeaea;
		box-shadow: 0 0 25px #cac6c6;

	}

	.title {
		margin: 0px auto 40px auto;
		text-align: center;
		color: #505458;
	}

	.submit-item>>>.el-form-item__content {
		margin-left: 0 !important;
	}

	.auto-login {
		text-align: right;
		margin-bottom: 10px;
	}
</style>
